import React, { useEffect, useRef, useState } from "react";
import styled from 'styled-components'
// import { Chart, LineAdvance} from 'bizcharts';
import { debounce, downloadDocument, readExcel, solveSpecificStr } from '@/util/util'
import { Modal, Form, Button, Input, Tag } from "@arco-design/web-react";
import jiangsu from "./jiangsu.json";
import * as echarts from 'echarts';
import 'echarts-gl'

type EChartsOption = echarts.MapSeriesOption;

const Wrapper = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
`;

// echarts.use([echarts.MapChart]);
interface ITriDBarChart {
    deviceId: number;
    deviceName: string;
    deviceNumber: string;
    address: string;
    ip: string;
    state: string;
    createTime: string | number;
}

const TriDBarChart = (props: any) => {

    const { chartData } = props;

    // const { id, style } = props;
    const chartRef = useRef<echarts.EChartsType | null>();
    const dayNums = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    const months = new Array(31).fill(0).map((item, index) => index);;
    const years = new Array(12).fill(0).map((item, index) => (index + 1) + '月');
    const data = new Array(31 * 12).fill(1).map((item, index) => {
        const [ day, month ] = [ (index) % 31, (index) % 12 ];
        let data = 0;
        let _index = 0;
        // 超过的天数作废为 0
        if ((day) < dayNums[month]) {
            // 否则拿具体数据
            for(let i = 0; i < month; i++) {
                _index += dayNums[i];
            }
            data = chartData[_index + day]
        }
        return [
            month,
            day,
            data,
        ]
    });
    const options = {
        tooltip: {},
        visualMap: {
            show: false,
            max: 0.3,
            inRange: {
                color: [
                    '#ffe9bf',
                    '#a01010',
                ]
            }
        },
        xAxis3D: {
            name: '日',
            type: 'category',
            data: months
        },
        yAxis3D: {
            name: '月',
            type: 'category',
            data: years,
            splitNumber: 12,
        },
        zAxis3D: {
            name: '异常幅值',
            type: 'value'
        },
        grid3D: {
            boxWidth: 200,
            boxDepth: 80,                 // 三维地理坐标系组件在三维场景中的深度
            viewControl: {
                projection: 'orthographic',
                alpha: 20,
                beta: 20,
            },
            light: {
                main: {
                    intensity: 1,
                    shadow: false
                },
                ambient: {
                    intensity: 0.3
                }
            }
        },
        series: [
            {
                type: 'bar3D',
                data: data.map(function (item) {
                    return {
                        value: [item[1], item[0], item[2]]
                    };
                }),
                shading: 'lambert',
                label: {
                    fontSize: 16,
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20,
                        color: '#900'
                    },
                    itemStyle: {
                        color: '#900'
                    }
                }
            }
        ]
    }

    useEffect(() => {

        
        const wrapper = document.querySelector(`#TriDBarChartwrapper_${123}`)!;
        const chartDom = document.getElementById(`TriDBarChart${123}`)!;

        chartRef.current = echarts.init(chartDom, '');

        const debounceResize = debounce(chartRef.current.resize, 10);
        const obCallback = () => {
            debounceResize();
        }
        const observer = new ResizeObserver(obCallback)

        // 双击下载
        const doubleClick = () => {
            const svg = chartDom?.firstChild?.firstChild;
            Modal.confirm({
                title: '确认',
                content: '确认',
                okButtonProps: {
                    status: 'danger',
                },
                onOk: () => {
                    return new Promise((resolve) => {
                        downloadDocument((svg as HTMLElement)?.outerHTML, `TriDBarChart.svg`)
                        resolve(svg);
                    }).catch((e) => {
                        
                    });
                },
            });
        }

        options && chartRef.current?.setOption(options);
        observer.observe(wrapper)
        chartDom?.addEventListener("dblclick", doubleClick);

        return () => {
            observer.unobserve(wrapper);
            observer.disconnect();
            chartDom?.removeEventListener("dblclick", doubleClick);
        }
    }, [])

    return (
        <Wrapper id={`TriDBarChartwrapper_${123}`}>
            <div style={{ width: '100%', height: '800px', background: 'white' }} id={`TriDBarChart${123}`}></div>
        </Wrapper>
    )
}


export default TriDBarChart;